<template>
  <!-- 边框设置 -->
  <div class="FG-border">
    <el-form-item label="边框颜色" v-if="active.borderColor !== undefined">
      <el-color-picker v-model="active.borderColor" />
    </el-form-item>
    <el-form-item label="边框宽度" v-if="active.borderWidth !== undefined">
      <el-input-number
        v-model="active.borderWidth"
        controls-position="right"
        :min="0"
        :max="10"
        :style="{ width: '100%' }"
      ></el-input-number>
    </el-form-item>
    <!-- <el-form-item label="cellspacing" v-if="active.cellspacing !== undefined">
      <el-input type="number" v-model.number="active.cellspacing" />
    </el-form-item>-->
    <el-form-item label="内边距" v-if="active.cellpadding !== undefined">
      <el-input type="number" v-model.number="active.cellpadding" />
    </el-form-item>
    <!-- <el-form-item label="对齐方式" v-if="active.tableAlign !== undefined">
      <el-select v-model="active.tableAlign" :style="{ width: '100%' }" clearable>
        <el-option label="左对齐" value="left" />
        <el-option label="居中" value="center" />
        <el-option label="右对齐" value="right" />
      </el-select>
    </el-form-item>-->
  </div>
</template>

<script>
import { deepClone } from "../utils";
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      active: {}
    };
  },
  mounted() {},
  computed: {},

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(this.active)) {
          this.active = deepClone(newValue);
        }
      }
    },
    active: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (JSON.stringify(newValue) !== JSON.stringify(this.value)) {
          this.$emit("input", newValue);
        }
      }
    }
  },

  methods: {}
};
</script>

<style lang="scss" scoped>
</style>